<template>
  <view class="teacher">
    <view v-for="(item, index) in ajax.list" :key="item.id + index" class="teacher-item">
      <view class="main" @click="onGoTeacher(item)">
        <uv-avatar :src="item.profilePhoto || defaultImages[2]" size="169rpx" mode="aspectFill"></uv-avatar>
        <view class="box">
          <view class="box-right">
            <!-- 头部 -->
            <view class="box-right-name">{{ item.username }}</view>
            <view class="box-right-collect" :class="item.collected.id === 0 ? '' : 'collect-active'" @click.stop="httpCollect(item)">
              {{ item.collected.id === 0 ? '+收藏' : '已收藏' }}
            </view>
          </view>
          <view class="box-content">
            <view class="box-content-title">擅长舞种</view>
            <view class="box-content-dances">
              <view v-for="(row, index) in item.dances" :key="index" class="box-content-dances-item">
                {{ row.name }}
              </view>
            </view>
          </view>
          <view class="box-content">
            <view class="box-content-title">签约舞蹈房</view>
            <view class="box-content-merchants">
              <view v-for="row in item.merchants" :key="row.id" class="box-content-merchants-item">
                {{ row.name }}
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="teacher-item-line">
        <uv-line color="#545454"></uv-line>
      </view>
    </view>
    <view v-if="ajax.list.length === 0" class="teacher-empty">
      <uv-empty mode="list" text="未找到匹配的搜索结果"></uv-empty>
    </view>
    <uv-toast ref="toastRef"></uv-toast>
  </view>
  <view class="settled uv-reset-button" @click.stop="onGoRegisterTeacher">
    <uv-icon class="icon" name="plus" color="#fff" size="28rpx"></uv-icon>
    <text class="collect-button-text">老师入驻</text>
  </view>
</template>

<script setup>
  import { defaultImages } from '@/common/js/global.js';
  import { ref, reactive, computed, defineProps, watch, defineExpose } from 'vue';
  const toastRef = ref();
  let ajax = reactive({
    list: []
  });
  let initShow = ref(false);
  let params = reactive({
    pageSize: 10,
    currentPage: 1,
    keyword: '',
    start: '',
    end: '',
    orderBy: []
  });
  let props = defineProps({
    modelValue: {
      type: Number,
      default: 0
    }
  });

  let httpGetTeacherList = async (type = 'search') => {
    let { teachers } = await uni.$uv.http.post('app/teacher/all', params);
    if (type === 'search') {
      ajax.list.splice(0, ajax.list.length, ...teachers);
    } else if (type === 'scrollDown') {
      ajax.list.push(...teachers);
    } else if (type === 'update') {
      teachers.map(r => {
        let index = ajax.list.findIndex(row => r.id === row.id);
        if (index > -1) {
          ajax.list.splice(index, 1, r);
        }
      });
    }
  };
  let onGoTeacher = val => {
    uni.$uv.route({
      url: '/pages/me/share',
      params: {
        id: val.id
      }
    });
  };
  let httpCollect = async val => {
    await uni.$uv.http.post(`app/collect/${!val.collected.id ? 'add' : 'cancel'}`, {
      classify: 'Teacher', //收藏类型
      objid: val.id, //收藏对象的数据ID
      optype: 'collect' //操作类型
    });
    val.collected.id = val.collected.id ? 0 : 1;
    toastRef.value.show({
      overlay: false,
      message: `${val.collected.id ? '' : '取消'}收藏成功`,
      type: 'success'
    });
  };
  // 触发子组件更新事件
  const sonChange = ({ type, val }) => {
    if (type == 'scrollDown') {
      params.currentPage++;
    } else if (type === 'search') {
      params.currentPage = 1;
      Object.keys(val).map(key => {
        params[key] = val[key];
      });
    }
    httpGetTeacherList(type);
  };
  defineExpose({ sonChange });
  watch(
    () => props.modelValue,
    val => {
      if (!val) return;
      if (val === 1 && !initShow.value) {
        httpGetTeacherList();
        initShow.value = true;
      }
    },
    { immediate: true }
  );
  // 注册老师
  const onGoRegisterTeacher = () => {
    uni.$uv.route({
      url: '/pages/teacher/register'
    });
  };
</script>

<style lang="scss" scoped>
  .teacher {
    width: 100%;
    overflow: hidden;
    padding-bottom: 105rpx;
    &-item {
      margin: 14rpx 26rpx;
    }
    &-empty {
      color: #808080;
      font-size: 26rpx;
      margin: 0 26rpx;
      &-text {
        text-align: center;
        margin-top: 21rpx;
        border-bottom: 1px solid #545454;
        padding-bottom: 49rpx;
      }
    }
    .collect-active {
      background-color: #b1b1b1 !important;
    }
    .main {
      display: flex;
      .box {
        margin-left: 10rpx;
        flex: 1;
        &-right {
          display: flex;
          justify-content: space-between;
          margin-bottom: 14rpx;
          margin-left: 9rpx;
          padding-left: 17rpx;
          &-name {
            font-size: 42rpx;
            font-weight: bold;
          }
          &-collect {
            background-color: $dance-main-color;
            width: 124rpx;
            height: 51rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 47rpx;
            font-size: 28rpx;
          }
        }
        &-content {
          background-color: #393939;
          border-radius: 21rpx;
          margin-bottom: 17rpx;
          padding: 17rpx;
          box-sizing: border-box;
          color: #b1b1b1;
          font-size: 28rpx;
          &-title {
            margin-bottom: 7rpx;
          }
          &-dances {
            display: flex;
            &-item {
              margin-right: 44rpx;
            }
          }
          &-merchants {
            display: flex;
            &-item {
              margin-right: 44rpx;
            }
          }
        }
      }
    }
  }
  .settled {
    position: fixed;
    bottom: 15rpx;
    left: 50%;
    transform: translate(-50%, 0);
    width: 263rpx;
    height: 73rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 65rpx;
    background-color: #ff7a66;
    font-size: 35rpx;
    color: #fff;
    font-weight: bold;
    .icon {
      margin-right: 14rpx;
    }
  }
</style>
